React Server Actions: Forenklet Skjemabehandling på Serversiden

React Server Actions, introdusert i React 18 og betydelig forbedret i Next.js, tilbyr en revolusjonerende tilnærming til håndtering av skjemainnsendinger og datamuteringer direkte på serveren. Denne kraftige funksjonen forenkler utviklingsprosessen, øker sikkerheten og forbedrer ytelsen sammenlignet med tradisjonell datahenting og -manipulering på klientsiden.

Hva er React Server Actions?

Server Actions er asynkrone funksjoner som kjører på serveren og kan kalles direkte fra React-komponenter. De lar deg utføre server-side oppgaver, som for eksempel:

• Skjemainnsendinger: Behandle skjemadata sikkert på serveren.
• Datamuteringer: Oppdatere databaser eller eksterne API-er.
• Autentisering: Håndtere brukerinnlogging og registrering.
• Server-side logikk: Utføre kompleks forretningslogikk uten å eksponere den for klienten.

Hovedfordelen med Server Actions er at de lar deg skrive server-side kode innenfor dine React-komponenter, noe som eliminerer behovet for separate API-ruter og kompleks logikk for datahenting på klientsiden. Denne samlokaliseringen av brukergrensesnitt og server-side logikk fører til en mer vedlikeholdbar og effektiv kodebase.

Fordeler med å Bruke React Server Actions

Å bruke React Server Actions gir flere betydelige fordeler:

Forenklet Utvikling

Server Actions reduserer mengden standardkode ved å la deg håndtere skjemainnsendinger og datamuteringer direkte i dine React-komponenter. Dette eliminerer behovet for separate API-endepunkter og kompleks logikk for datahenting på klientsiden, noe som effektiviserer utviklingsprosessen og gjør koden din enklere å forstå og vedlikeholde. Tenk på et enkelt kontaktskjema. Uten Server Actions ville du trengt en egen API-rute for å håndtere skjemainnsendingen, JavaScript på klientsiden for å sende dataene, og feilhåndteringslogikk både på klienten og serveren. Med Server Actions kan alt dette håndteres i selve komponenten.

Forbedret Sikkerhet

Ved å kjøre kode på serveren, reduserer Server Actions angrepsflaten til applikasjonen din. Sensitiv data og forretningslogikk holdes unna klienten, noe som forhindrer ondsinnede brukere i å manipulere dem. For eksempel blir database-legitimasjon eller API-nøkler aldri eksponert i klientsidekoden. All databaseinteraksjon skjer på serveren, noe som minimerer risikoen for SQL-injeksjon eller uautorisert datatilgang.

Forbedret Ytelse

Server Actions kan forbedre ytelsen ved å redusere mengden JavaScript som må lastes ned og kjøres på klienten. Dette er spesielt gunstig for brukere på enheter med lav ytelse eller med trege internettforbindelser. Databehandling skjer på serveren, og kun de nødvendige UI-oppdateringene sendes til klienten, noe som resulterer i raskere sidelasting og en jevnere brukeropplevelse.

Optimistiske Oppdateringer

Server Actions integreres sømløst med Reacts Suspense og Transitions, noe som muliggjør optimistiske oppdateringer. Optimistiske oppdateringer lar deg oppdatere brukergrensesnittet umiddelbart, selv før serveren har bekreftet handlingen. Dette gir en mer responsiv og engasjerende brukeropplevelse, ettersom brukerne ikke trenger å vente på at serveren skal svare før de ser resultatene av sine handlinger. I netthandel kan det å legge en vare i handlekurven vises umiddelbart mens serveren bekrefter tillegget i bakgrunnen.

Progressiv Forbedring

Server Actions støtter progressiv forbedring, noe som betyr at applikasjonen din fortsatt kan fungere selv om JavaScript er deaktivert eller ikke klarer å laste. Når JavaScript er deaktivert, vil skjemaer sendes inn som tradisjonelle HTML-skjemaer, og serveren vil håndtere innsendingen og omdirigere brukeren til en ny side. Dette sikrer at applikasjonen din forblir tilgjengelig for alle brukere, uavhengig av deres nettleserkonfigurasjon eller nettverksforhold. Dette er spesielt viktig for tilgjengelighet og SEO.

Hvordan Bruke React Server Actions

For å bruke React Server Actions, må du bruke et rammeverk som støtter dem, som for eksempel Next.js. Her er en trinn-for-trinn-guide:

1. Definer Server Action

Lag en asynkron funksjon som skal kjøre på serveren. Denne funksjonen skal håndtere logikken du ønsker å utføre på serveren, som for eksempel å oppdatere en database eller kalle et API. Merk funksjonen med `"use server"`-direktivet øverst for å indikere at det er en Server Action. Dette direktivet forteller React-kompilatoren at den skal behandle funksjonen som en server-side-funksjon og automatisk håndtere serialisering og deserialisering av data mellom klienten og serveren.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Tøm rute-cachen
    return { message: 'Melding lagret!' };
  } catch (e) {
    return { message: 'Kunne ikke lagre melding' };
  }
}
            

              
                Copy
              
            
          

Forklaring:

• `'use server'`-direktivet markerer denne funksjonen som en Server Action.
• `revalidatePath('/')` tømmer rute-cachen, og sikrer at oppdaterte data hentes ved neste forespørsel. Dette er avgjørende for å opprettholde datakonsistens.
• `saveMessage(message)` er en plassholder for din faktiske databaseinteraksjonslogikk. Den antar at du har en `saveMessage`-funksjon definert et annet sted for å håndtere lagring av meldingen i databasen din.
• Funksjonen returnerer et tilstandsobjekt som kan brukes til å vise tilbakemelding til brukeren.

2. Importer og Bruk Server Action i Komponenten Din

Importer Server Action inn i React-komponenten din og bruk den som `action`-prop på et skjemaelement. `useFormState`-hooken kan brukes til å håndtere skjemaets tilstand og vise tilbakemelding til brukeren.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Melding:
      
      Send inn
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Forklaring:

• `'use client'`-direktivet spesifiserer at dette er en klientkomponent (siden den bruker `useFormState`).
• `useFormState(createMessage, {message: ''})` initialiserer skjematilstanden med `createMessage` Server Action. Det andre argumentet er den initielle tilstanden.
• `action`-propen til `form`-elementet settes til `formAction` som returneres av `useFormState`.
• `state`-variabelen inneholder returverdien fra Server Action, som kan brukes til å vise tilbakemelding til brukeren.

3. Håndter Skjemadata

Inne i Server Action kan du få tilgang til skjemadataene ved å bruke `FormData`-API-et. Dette API-et gir en praktisk måte å få tilgang til verdiene i skjemafeltene på.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Håndter Feil

Bruk `try...catch`-blokker for å håndtere feil som kan oppstå under utførelsen av Server Action. Returner en feilmelding i tilstandsobjektet for å vise den til brukeren.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Kunne ikke lagre melding' };
  }
}
            

              
                Copy
              
            
          

5. Revalider Data

Etter at en Server Action har mutert data, kan det være nødvendig å revalidere databufferen (cache) for å sikre at brukergrensesnittet reflekterer de siste endringene. Bruk `revalidatePath`- eller `revalidateTag`-funksjonene fra `next/cache` for å revalidere spesifikke stier eller tagger.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Tøm rute-cachen
  // ...
}
            

              
                Copy
              
            
          

Avansert Bruk

Mutering av Data

Server Actions er spesielt godt egnet for å mutere data, som å oppdatere databaser eller eksterne API-er. Du kan bruke Server Actions til å håndtere komplekse datamuteringer som krever server-side logikk, som å validere data, utføre beregninger eller samhandle med flere datakilder. Tenk deg et scenario der du trenger å oppdatere en brukers profil og sende en bekreftelses-e-post. En Server Action kan håndtere både databaseoppdateringen og e-postutsendingen i en enkelt, atomisk operasjon.

Autentisering og Autorisering

Server Actions kan brukes til å håndtere autentisering og autorisering. Ved å utføre autentiserings- og autorisasjonskontroller på serveren, kan du sikre at kun autoriserte brukere har tilgang til sensitive data og funksjonalitet. Du kan bruke Server Actions til å håndtere brukerinnlogging, registrering og tilbakestilling av passord. For eksempel kan en Server Action verifisere brukerlegitimasjon mot en database og returnere et token som kan brukes til å autentisere påfølgende forespørsler.

Edge-funksjoner

Server Actions kan distribueres som Edge-funksjoner, som kjører på et globalt nettverk av servere nær brukerne dine. Dette kan redusere ventetid (latency) betydelig og forbedre ytelsen, spesielt for brukere på geografisk spredte steder. Edge-funksjoner er ideelle for å håndtere Server Actions som krever lav ventetid, som sanntidsdataoppdateringer eller personalisert innholdslevering. Next.js gir innebygd støtte for å distribuere Server Actions som Edge-funksjoner.

Streaming

Server Actions støtter streaming, som lar deg sende data til klienten i biter etter hvert som de blir tilgjengelige. Dette kan forbedre den opplevde ytelsen til applikasjonen din, spesielt for Server Actions som tar lang tid å utføre. Streaming er spesielt nyttig for å håndtere store datasett eller komplekse beregninger. For eksempel kan du streame søkeresultater til klienten etter hvert som de hentes fra databasen, noe som gir en mer responsiv brukeropplevelse.

Beste Praksis

Her er noen beste praksiser å følge når du bruker React Server Actions:

• Hold Server Actions små og fokuserte: Hver Server Action bør utføre en enkelt, veldefinert oppgave. Dette gjør koden din enklere å forstå, teste og vedlikeholde.
• Bruk beskrivende navn: Velg navn som tydelig indikerer formålet med Server Action. For eksempel er `createComment` eller `updateUserProfile` bedre enn generiske navn som `processData`.
• Valider data på serveren: Valider alltid data på serveren for å forhindre at ondsinnede brukere injiserer ugyldige data i applikasjonen din. Dette inkluderer validering av datatyper, formater og områder.
• Håndter feil elegant: Bruk `try...catch`-blokker for å håndtere feil og gi informative feilmeldinger til brukeren. Unngå å eksponere sensitiv feilinformasjon til klienten.
• Bruk optimistiske oppdateringer: Gi en mer responsiv brukeropplevelse ved å oppdatere brukergrensesnittet umiddelbart, selv før serveren har bekreftet handlingen.
• Revalider data etter behov: Sørg for at brukergrensesnittet reflekterer de siste endringene ved å revalidere databufferen etter at en Server Action har mutert data.

Eksempler fra den Virkelige Verden

La oss se på noen eksempler fra den virkelige verden på hvordan React Server Actions kan brukes i ulike typer applikasjoner:

E-handelsapplikasjon

• Legge til en vare i handlekurven: En Server Action kan håndtere å legge til en vare i brukerens handlekurv og oppdatere totalsummen i databasen. Optimistiske oppdateringer kan brukes til å umiddelbart vise varen i kurven.
• Behandle en betaling: En Server Action kan håndtere behandling av en betaling via en tredjeparts betalingsgateway. Server Action kan også oppdatere ordrestatusen i databasen og sende en bekreftelses-e-post til brukeren.
• Sende inn en produktanmeldelse: En Server Action kan håndtere innsending av en produktanmeldelse og lagre den i databasen. Server Action kan også beregne gjennomsnittsvurderingen for produktet og oppdatere produktdetaljsiden.

Applikasjon for Sosiale Medier

• Poste en ny tweet: En Server Action kan håndtere posting av en ny tweet og lagre den i databasen. Server Action kan også oppdatere brukerens tidslinje og varsle følgerne deres.
• Like et innlegg: En Server Action kan håndtere å like et innlegg og oppdatere antall likes i databasen. Optimistiske oppdateringer kan brukes til å umiddelbart vise det oppdaterte antallet likes.
• Følge en bruker: En Server Action kan håndtere å følge en bruker og oppdatere antall følgere og fulgte i databasen.

Innholdsstyringssystem (CMS)

• Opprette et nytt blogginnlegg: En Server Action kan håndtere opprettelsen av et nytt blogginnlegg og lagre det i databasen. Server Action kan også generere en "slug" for innlegget og oppdatere sitemap.
• Oppdatere en side: En Server Action kan håndtere oppdatering av en side og lagre den i databasen. Server Action kan også revalidere sidebufferen for å sikre at det oppdaterte innholdet vises til brukerne.
• Publisere en endring: En Server Action kan håndtere publisering av en endring i databasen og varsle alle abonnenter.

Hensyn til Internasjonalisering

Når man utvikler applikasjoner for et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Her er noen hensyn for bruk av React Server Actions i internasjonaliserte applikasjoner:

• Håndtering av ulike dato- og tidsformater: Bruk `Intl`-API-et for å formatere datoer og tider i henhold til brukerens locale.
• Håndtering av ulike tallformater: Bruk `Intl`-API-et for å formatere tall i henhold til brukerens locale.
• Håndtering av ulike valutaer: Bruk `Intl`-API-et for å formatere valutaer i henhold til brukerens locale.
• Oversette feilmeldinger: Oversett feilmeldinger til brukerens språk.
• Støtte for høyre-til-venstre (RTL) språk: Sørg for at applikasjonen din støtter RTL-språk, som arabisk og hebraisk.

For eksempel, ved behandling av et skjema som krever en dato, kan en Server Action bruke `Intl.DateTimeFormat`-API-et for å parse datoen i henhold til brukerens locale, og dermed sikre at datoen tolkes korrekt uavhengig av brukerens regionale innstillinger.

Konklusjon

React Server Actions er et kraftig verktøy for å forenkle server-side skjemabehandling og datamuteringer i React-applikasjoner. Ved å la deg skrive server-side kode direkte i dine React-komponenter, reduserer Server Actions standardkode, øker sikkerheten, forbedrer ytelsen og muliggjør optimistiske oppdateringer. Ved å følge beste praksis som beskrevet i denne guiden, kan du utnytte Server Actions til å bygge mer robuste, skalerbare og vedlikeholdbare React-applikasjoner. Ettersom React fortsetter å utvikle seg, vil Server Actions utvilsomt spille en stadig viktigere rolle i fremtidens webutvikling.